import React from 'react';
import { createRoot } from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

import { Provider } from 'react-redux'
import store  from "./07-react-redux-mobile/redux/store"
import App from './07-react-redux-mobile/App';
// 函数式组件
// const ChildComponent  = () => {
//   return (
//     <span>app</span>
//   )
// }
// const App = () => 
//   {
//     const  myRef = React.createRef()
//     const textStyle = {
//       color: 'red',
//       fontSize: '16px',
//       fontWeight: 'bold',
//     };
//     // const btnClick = () => {

//     // }
//     return (
//       <div>
//         <h2 style={{color: 'red'}}>原来，天上的星，都是曾被人惦念而又遗忘的梦啊。</h2>
//         {/* 内联样式：可以直接在组件的 JSX 中使用 style 属性来指定内联样式。样式需要以 JavaScript 对象的形式传递，属性名采用驼峰式写法，属性值为样式值。 */}
//         <h3 style={textStyle}>阶砖不会拒绝磨蚀，窗花不可幽禁落霞。</h3>
//         {/* 使用CSS文件：在React应用中，你也可以像普通的网页开发一样，创建一个独立的CSS文件，并在组件中引入。你可以使用className属性给元素添加类名，并在CSS文件中定义相应的样式。 */}
//         <h4 className="HeLlo"> 不负韶华，不忘初心</h4>
//         <button > {myRef.current}</button>
//         <ChildComponent  />
//         <TableCom ref={myRef}></TableCom>
//       </div>

//     )
//   }

// 挂载


const root = createRoot(document.getElementById('root'));

// const router = createBrowserRouter([
//   {
//     path: "/",
//     element: <div>Hello world!</div>,
//   },
//   {
//     path: '/index',
//     element: <div>1111</div>
//   }
// ]);


root.render(
  <Provider store={store}>
   <div>
      <App/>
    </div>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

